import SideList from "./SideList";
import DeepSeek from "./DeepSeek";
import "./index.scss";
import { useState } from "react";
export default function Sidebar() {
  const collapseImg = new URL("@/icon/svg/collapse.svg", import.meta.url).href;
  const [collapse, setCollapse] = useState(false);
  const handleChange = () => {
    console.log("collapse", collapse);

    setCollapse(!collapse);
  };
  return (
    <div className="pt-[19px] pb-[19px] bg-[#f9fbff]  hidden md:block">
      {collapse ? (
        <div className="w-64 h-full">
          <div className="flex p-5 pt-0 justify-between items-center">
            <DeepSeek />
            <img
              className="w-7 h-7 cursor-pointer"
              src={collapseImg}
              alt=""
              onClick={handleChange}
            />
          </div>
        </div>
      ) : (
        <div className="w-[68px] h-full flex flex-col items-center">
          <SideList collapse={collapse} changeCollapse={handleChange} />
        </div>
      )}
    </div>
  );
}
